<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.util.Calendar" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/date-fr-BE.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.4.4.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.8.5.custom.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/json.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/common.css" />
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/timesheet.css" />

        <script type="text/javascript">
            <c:set var="startDate" value="${startDate}"/>
            <%
                SimpleDateFormat sdfYear = new SimpleDateFormat("yyyy");
                Date startDate = (java.util.Date)pageContext.getAttribute("startDate");
                String year = sdfYear.format(startDate);
            %>
            var year  = "<%=year%>";
            $(function () {
                $("#submit").click(function() {
                    $.postJSON("save-timesheet.html", serializeData(), function(data) {
                        document.location.href = "view-timesheet.html?month=" + data.month + "&year=" + data.year;
                    }, "json");
                });

                $("#month-selection option[selected]").removeAttr("selected");
                $("#month-selection option[value='<%=request.getAttribute("selectedMonth")%>/<%=request.getAttribute("selectedYear")%>']").attr("selected", "selected");

                $("#month-selection").change( function() {
                    var str = $("select option:selected")[0].text;
                    var splitedMonthAndYear = str.split("/");
                    document.location.href = "new-timesheet.html?month=" + splitedMonthAndYear[0] + "&year=" + splitedMonthAndYear[1];
                });

            });

            function serializeData() {
                var timesheet = new Object();
                timesheet.clientName = $("#client-value").val();
                timesheet.projectName = $("#project-value").val();
                timesheet.consultant = $("#consultant-value").val();
                timesheet.responsiblePerson = $("#project-manager-value").val();
                timesheet.days = new Array();

                $(".in-invoice").each(function(index) {
                    var weekDay = new Object();
                    var dateStr = $(this).children("p:first").html() + "/" + year;
                    weekDay.date = Date.parse(dateStr);
                    weekDay.workedStdHours = $(this).children("p:last").children("input:first").val();

                    if ($(this).hasClass('saturday') || $(this).hasClass('sunday')) {
                        weekDay.weekend = true;
                    }

                    timesheet.days.push(weekDay);
                });

                return timesheet;
            }
        </script>
        <title>Quattroclix - Timesheet</title>
    </head>
    <body>
        <div id="background">
            <div class="wraper">
                <div id="header">
                    <a href="${pageContext.request.contextPath}/app/timesheet/view-timesheet.html">
                        <img src="${pageContext.request.contextPath}/img/logo.gif" width="257" height="36" id="logo" alt="logo Quattroclix" />
                    </a>
                    <div id="menu">
                        <ul>
                            <li class="first"><a href="../contract/new-contract.html">New Contract</a></li>
                            <li><a href="../invoice/new-invoice.html">New Invoice</a></li>
                            <li><a href="../invoice/view-invoice.html">View Invoice</a></li>
                            <li><a class="active" href="../timesheet/new-timesheet.html">New Timesheet</a></li>
                            <li><a href="../timesheet/view-timesheet.html">View Timesheet</a></li>
                        </ul>
                    </div>
                </div>
                <div id="timesheet">
                    <%
                        SimpleDateFormat sdf = new SimpleDateFormat("MM/yyyy");
                    %>
                    <div id="timesheet-header-data">
                        <div class="field-line">
                            <div class="label">Month</div>
                            <div class="value">
                                <select id="month-selection">
                                    <c:forEach items="${availableMonths}" var="month">
                                        <option value="<%=sdf.format(((Calendar)pageContext.getAttribute("month")).getTime())%>">
                                            <%=sdf.format(((Calendar)pageContext.getAttribute("month")).getTime())%>
                                        </option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="field-line">
                            <div class="label-value">
                                <div class="label">Consultant</div>
                                <div class="value"><input type="text" id="consultant-value" size="30" value="<c:out value="${timesheet.consultant}"/>"></div>
                            </div>
                        </div>
                        <div class="field-line">
                            <div class="label-value">
                                <div class="label">Client</div>
                                <div class="value"><input type="text" id="client-value" size="30" value="<c:out value="${timesheet.clientName}"/>"></div>
                            </div>
                        </div>
                        <div class="field-line">
                            <div class="label-value">
                                <div class="label">Project</div>
                                <div class="value"><input type="text" id="project-value" size="30" value="<c:out value="${timesheet.projectName}"/>"></div>
                            </div>
                        </div>
                        <div class="field-line">
                            <div class="label-value">
                                <div class="label">Project Manager</div>
                                <div class="value"><input type="text" id="project-manager-value" size="30" value="<c:out value="${timesheet.responsiblePerson}"/>"></div>
                            </div>
                        </div>
                    </div>
                    <div id="timesheet-days">
                    <%
                        sdf = new SimpleDateFormat("dd/MM");
                        Calendar cal = java.util.Calendar.getInstance();
                        Date curDate = null;
                    %>
                    <c:forEach items="${timesheet.days}" var="day">

                        <c:set var="date" value="${day.date}"/>
                        <%
                            curDate = (java.util.Date)pageContext.getAttribute("date");
                            cal.setTime(curDate);
                            if (cal.get(java.util.Calendar.DAY_OF_WEEK) == 1) {
                                pageContext.setAttribute("weekday", "sunday");
                            } else if (cal.get(java.util.Calendar.DAY_OF_WEEK) == 7) {
                                pageContext.setAttribute("weekday", "saturday");
                            } else {
                                pageContext.setAttribute("weekday", "other");
                            }
                        %>
                        <c:if test="${! day.partOfInvoice}">
                            <c:if test="${weekday == 'other'}">
                            <div class="day out-of-invoice">
                            </c:if>
                            <c:if test="${weekday == 'saturday'}">
                            <div class="day out-of-invoice saturday">
                            </c:if>
                            <c:if test="${weekday == 'sunday'}">
                            <div class="day out-of-invoice sunday">
                            </c:if>
                                <p><%= sdf.format((java.util.Date)pageContext.getAttribute("date")) %></p>
                                <p>&nbsp;</p>
                            </div>
                        </c:if>
                        <c:if test="${day.partOfInvoice}">
                            <c:if test="${weekday == 'other'}">
                                <c:if test="${! day.holiday}">
                                    <div class="day in-invoice">
                                </c:if>
                                <c:if test="${day.holiday}">
                                    <div class="day in-invoice holiday">
                                </c:if>
                                        <p><%= sdf.format((java.util.Date)pageContext.getAttribute("date")) %></p>
                                        <p>
                                            <input type="text" size="5" value="8"/>
                                        </p>
                            </c:if>
                            <c:if test="${weekday == 'saturday'}">
                            <div class="day in-invoice saturday">
                                <p><%= sdf.format((java.util.Date)pageContext.getAttribute("date")) %></p>
                                <p>
                                    <input type="text" size="5" value="0"/>
                                </p>
                            </c:if>
                            <c:if test="${weekday == 'sunday'}">
                            <div class="day in-invoice sunday">
                                <p><%= sdf.format((java.util.Date)pageContext.getAttribute("date")) %></p>
                                <p>
                                    <input type="text" size="5" value="0"/>
                                </p>
                            </c:if>

                            </div>
                        </c:if>
                    </c:forEach>
                    </div>
                    <div id="actions">
                        <ul>
                            <li><a class="text" id="submit" href="#">Submit</a></li>
                            <li><a class="text" id="cancel" href="#">Cancel</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
